<!--  -->
<template>
    <div class="flex">
        <div class="pr-2">
            <div class="flex">
                <div class="icon equip-icon" @click="uploadClick(equips[0])">
                    <img :src="getIcon(equips[0])" alt="">
                </div>
                <div class="icon equip-icon" @click="uploadClick(equips[1])">
                    <img :src="getIcon(equips[1])" alt="">
                </div>
            </div>
            <div class="flex">
                <div class="icon equip-icon" @click="uploadClick(equips[2])">
                    <img :src="getIcon(equips[2])" alt="">
                </div>
                <div class="icon equip-icon" @click="uploadClick(equips[3])">
                    <img :src="getIcon(equips[3])" alt="">
                </div>
            </div>
            <div class="flex">
                <div class="icon equip-icon" @click="uploadClick(equips[4])">
                    <img :src="getIcon(equips[4])" alt="">
                </div>
            </div>
        </div>
        <div>
            <div class="flex">
                <div class="icon equip-icon" @click="uploadClick(equips[5])">
                    <img :src="getIcon(equips[5])" alt="">
                </div>
                <div class="icon equip-icon" @click="uploadClick(equips[6])">
                    <img :src="getIcon(equips[6])" alt="">
                </div>
            </div>
            <div class="flex">
                <div class="icon equip-icon" @click="uploadClick(equips[8])">
                    <img :src="getIcon(equips[8])" alt="">
                </div>
                <div class="icon equip-icon" @click="uploadClick(equips[7])">
                    <img :src="getIcon(equips[7])" alt="">
                </div>
            </div>
            <div class="flex">
                <div class="icon equip-icon" @click="uploadClick(equips[10])">
                    <img :src="getIcon(equips[10])" alt="">
                </div>
                <div class="icon equip-icon" @click="uploadClick(equips[9])">
                    <img :src="getIcon(equips[9])" alt="">
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang='ts'>
import type { equipMessageType } from '@/types/defaults';
import { ref, reactive } from 'vue'
const props = defineProps<{
    equips: equipMessageType[]
}>();
const getIcon = (equip: any) => {
    let url = ''
    if (equip) {
        url = equip.icon.indexOf('http') > -1 ? equip.icon : 'https://www.skycity.top:8018/equipment' + equip.icon
    }
    return url
};
const emit = defineEmits<{
    click: any
}>()
const uploadClick = (item: any) => {
    emit('click', item)
}
</script>
<style scoped lang='less'>
/* @import url(); 引入css类 */
.icon {
    margin: 2px;
    cursor: pointer;
    transition: all 0.5s;

    &:hover {
        filter: grayscale(1);
        transform: scale(1.1);
    }

    &:active {
        transform: scale(.9);
        filter: grayscale(1);
    }
}
</style>